
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>完善银行卡</title>
    <link rel="stylesheet" href="../../fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../js/mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/mui-app-style.css">
    <link rel="stylesheet" href="../../css/certification/certification.css">
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
    <div class="mui-view">
        <div class="mui-navbar" >
        </div>
        <div class="mui-pages">
        </div>
    </div>
</div>
<!--单页面开始-->
<div id="setting" class="mui-page" >
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--完善银行卡--></h1>
        <button id="pmt__iconbtn" type="button" class="mui-btn  mui-btn-link mui-btn-nav mui-pull-right">
            <span class="fa fa-bell-o"></span>
        </button>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-content" id="certification" >
                    <!--{{json}}-->
                    <!--<br>-->
                    <!--{{bankArea}}-->
                    <div class="mui-cardss" >
                        <form class="mui-input-group">
                            <div class="mui-input-row">
                                <label>姓名</label>
                                <input type="text" v-model="json.realname" placeholder="请输入姓名">
                            </div>
                            <div class="mui-input-row">
                                <label>银行卡号</label>
                                <input type="number" v-model="json.bankNo" class="mui-input-clear"
                                       placeholder="请输入您的收款银行卡号">
                            </div>
                        </form>
                        <div style="height: 6px;"></div>
                        <form class="mui-input-group">
                            <div class="mui-input-row">
                                <div class="mui-navigate-right">
                                    <label>开户银行</label>
                                    <input type="text"  v-model="json.bankId"   placeholder="请选择所属银行">
                                    <a id="bank_modal" href="#bankList">请选择所属银行</a>
                                </div>
                            </div>
                            <div class="mui-input-row">
                                <div class="mui-navigate-right">
                                    <label>开户地点</label>
                                    <input type="text"   v-model="bankArea" class="mui-input-clear"
                                           placeholder="请选择所属区域">
                                    <a id="province_modal" href="#province">请选择省份</a>
                                    <!--<a id="city_modal" href="#city">请选择城市</a>-->
                                </div>
                            </div>
                            <div class="mui-input-row">
                                <label>开户支行</label>
                                <input type="text"  v-model="json.bankBranch" class="mui-input-clear"
                                       placeholder="请选择所属支行">
                                <span class="fa fa-search"></span>
                                <a id="branch_modal" href="#branch">请选择所属支行</a>
                            </div>
                        </form>
                    </div>
                    <!--<div style="height: 440px"></div>-->
                    <div class="mui-row">
                        <div class="mui-button-forms">
                            <br>
                            <button id="submit" type="button" class="mui-btn mui-btn-primary mui-btn-block">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--银行信息-->
<div id="bankList" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--请选择银行--></h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-content">
                    <!--请选择银行-->
                    <ul class="mui-table-view ">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--省份信息-->
<div id="province" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--省份--></h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--省份-->
                <ul class="mui-table-view">

                </ul>
            </div>
        </div>
    </div>
</div>
<!--银行信息-->
<div id="city" class="mui-page">
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span><!--添加银行卡-->
        </button>
        <h1 class="mui-center mui-title"><!--城市--></h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--城市-->
                <ul class="mui-table-view">
                </ul>
            </div>
        </div>
    </div>
</div>

<!--支行信息-->
<div id="branch" class="mui-page">
    {{list}}
    <div class="mui-navbar-inner mui-bar mui-bar-nav">
        <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
            <span class="mui-icon mui-icon-left-nav"></span>
        </button>
        <h1 class="mui-center mui-title"><!--支行--></h1>
    </div>
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll" id="branchScroll">
                <!--支行信息-->
                <div class="mui-input-row mui-search" style="position: relative;top:6px;margin:0 10px;">
                    <input type="search" v-model="keyword" class="mui-input-clear" placeholder="">
                </div>
                <ul class="mui-table-view" style="margin:0;">
                    <li class="mui-table-view-cell" v-for="item in branch" >{{item}}</li>
                    <li class="mui-table-view-cell" v-if="branch.length==0" >未查询到数据！</li>
                </ul>
            </div>
        </div>
    </div>




</div>
<script src="../../js/vue.js"></script>
<script src="../../js/mui-layer-mobile/layer.js"></script>
<script src="../../js/mui/js/mui.min.js"></script>
<script src="../../js/mui-view/mui.view.js"></script>
<script src="../../js/common/crypto-js.js"></script>
<script src="../../js/common/common.js"></script>
<script src="../../js/more/compeleteBandCard.js"></script>
<style>
    .layui-m-layercont{
        padding-top:20px;
    }
    .pmt{
        position: relative;
    }
    #pmt__iconbtn{
        position: relative;
        right:7px;
        color: #000000;
    }
    .pmt__close{
        position: absolute;
        right:-10px;
        top:-5px;
        font-size:20px;
        color: #ccc;
    }
    .pmt__icon{
        font-size:30px;
        padding-bottom:20px;
        color: #F7D14B;
        transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    .pmt__title{
        text-align: left;
    }
    .pmt__list,
    .pmt__list ul{
        padding:0;margin:0;
    }
    .pmt__list li{
        list-style: none;
        text-align: left;
    }
</style>
<script>
    var layerIndex;
    mui.ready(function () {
        // 自定义标题风格
        mui(".mui-bar").on('tap',"#pmt__iconbtn",function () {
            layerIndex = layer.open({
                content: `<div class="pmt">
                <div class="pmt__close"><i class="fa fa-close "></i></div>
                <div class="pmt__icon"><i class="fa fa-bell"></i></div>
                <div class="pmt__title">完善X联盟结算卡信息</div>
                <div class="pmt__title">尊敬的服务商，您好：</div>
                <ul class="pmt__list">
                    <li>1.为了维护您的权益请及时完善结算卡信息，以免影响收益的正常接收;</li>
                    <li>2.开户支行名称可致电所属银行查询;</li>
                    <li>3.如需变更结算卡可在完善信息时直接变更。</li>
                </ul>
            </div>`
            });
            // close
            mui(".pmt").on('tap',".pmt__close",function () {
                layer.close(layerIndex)
            })
        })
    })
</script>
</body>
</html>